<!DOCTYPE html>
<html>
<head>
    <title>Dam Stability Diagram</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
        canvas { background-color: white; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Config ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper Functions ---
        function drawArrow(fromX, fromY, toX, toY, headlen = 10) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }
        
        function drawDoubleArrow(x1, y1, x2, y2, label) {
            ctx.save();
            ctx.lineWidth = 1.5;
            drawArrow(x1, y1, x2, y2, 8);
            drawArrow(x2, y2, x1, y1, 8);
            ctx.restore();

            if (label) {
                const midX = (x1 + x2) / 2;
                const midY = (y1 + y2) / 2;
                const angle = Math.atan2(y2 - y1, x2 - x1);
                let labelOffset = (angle === 0) ? -20 : 20;
                if (label === 'h') labelOffset = -20;
                
                ctx.save();
                ctx.translate(midX + labelOffset * Math.cos(angle + Math.PI / 2), midY + labelOffset * Math.sin(angle + Math.PI / 2));
                ctx.fillText(label, 0, 0);
                ctx.restore();
            }
        }
        
        function drawBrickPattern(polygon) {
            const brickHeight = 12;
            const path = new Path2D();
            path.moveTo(polygon[0].x, polygon[0].y);
            for (let i = 1; i < polygon.length; i++) { path.lineTo(polygon[i].x, polygon[i].y); }
            path.closePath();
            
            ctx.save();
            ctx.clip(path);

            const bounds = { xMin: Infinity, xMax: -Infinity, yMin: Infinity, yMax: -Infinity };
            polygon.forEach(p => {
                bounds.xMin = Math.min(bounds.xMin, p.x);
                bounds.xMax = Math.max(bounds.xMax, p.x);
                bounds.yMin = Math.min(bounds.yMin, p.y);
                bounds.yMax = Math.max(bounds.yMax, p.y);
            });
            
            ctx.lineWidth = 1;
            for (let y = bounds.yMin + brickHeight; y < bounds.yMax; y += brickHeight) {
                ctx.beginPath(); ctx.moveTo(bounds.xMin - 5, y); ctx.lineTo(bounds.xMax + 5, y); ctx.stroke();
            }

            let stagger = true;
            for (let y = bounds.yMin; y < bounds.yMax - 0.1; y += brickHeight) {
                const startX = stagger ? bounds.xMin + 25 : bounds.xMin;
                for (let x = startX; x < bounds.xMax; x += 50) {
                     ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y + brickHeight); ctx.stroke();
                }
                stagger = !stagger;
            }
            ctx.restore();
        }

        function drawWater(xStart, yTop, height, width = 100) {
            ctx.save();
            ctx.lineWidth = 1.5;
            ctx.beginPath(); ctx.moveTo(xStart, yTop); ctx.lineTo(xStart + width, yTop); ctx.stroke();
            for (let y = yTop + 15; y < yTop + height; y += 15) {
                const dashLength = 10 + Math.random() * 20;
                const xOffset = 5 + Math.random() * (width - dashLength - 10);
                ctx.beginPath(); ctx.moveTo(xStart + xOffset, y); ctx.lineTo(xStart + xOffset + dashLength, y); ctx.stroke();
            }
            ctx.restore();
        }
        
        function drawGround(y, canvasWidth) {
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.fillRect(0, y, canvasWidth, 60);
            ctx.lineWidth = 3;
            ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvasWidth, y); ctx.stroke();

            ctx.lineWidth = 1.5;
            for (let i = -y; i < canvasWidth; i += 15) {
                ctx.beginPath(); ctx.moveTo(i, y); ctx.lineTo(i + 60, y + 60); ctx.stroke();
            }
            ctx.restore();
        }

        // --- Main Drawing ---
        const yGround = 350;
        const hPixels = 220;
        const yTop = yGround - hPixels;

        drawGround(yGround, canvas.width);

        // --- Dam 1 (Rectangle) ---
        const x1Start = 70;
        const aPixels = 90;
        const x1End = x1Start + aPixels;
        
        const rectPoly = [{x:x1Start, y:yGround}, {x:x1Start, y:yTop}, {x:x1End, y:yTop}, {x:x1End, y:yGround}];
        drawBrickPattern(rectPoly);
        ctx.beginPath(); ctx.rect(x1Start, yTop, aPixels, hPixels); ctx.stroke();
        
        ctx.fillText('A', x1Start, yTop - 20);
        ctx.fillText('B', x1End - 20, yGround + 25);
        
        drawDoubleArrow(x1Start, yGround + 50, x1End, yGround + 50, 'a');
        
        const x1Center = x1Start + aPixels / 2;
        ctx.save(); ctx.lineWidth = 1.5; ctx.setLineDash([6, 4]);
        ctx.beginPath(); ctx.moveTo(x1Center, yTop - 30); ctx.lineTo(x1Center, yGround); ctx.stroke();
        ctx.restore();
        ctx.fillText('y', x1Center, yTop - 45);

        const pivotB1 = {x: x1End, y: yGround};
        ctx.save(); ctx.lineWidth = 1.5;
        // The arc indicating rotation
        ctx.beginPath();
        ctx.arc(pivotB1.x, pivotB1.y, 40, Math.PI, Math.PI * 1.3, false);
        const arcArrowX = pivotB1.x + 40 * Math.cos(Math.PI * 1.3);
        const arcArrowY = pivotB1.y + 40 * Math.sin(Math.PI * 1.3);
        drawArrow(arcArrowX + 5, arcArrowY + 5, arcArrowX, arcArrowY, 8);
        ctx.stroke();
        // The small downward arrow for weight
        drawArrow(x1Center, yGround - 150, x1Center, yGround - 100, 8);
        ctx.restore();

        // --- Dam 2 (Trapezoid) ---
        const x2Start = x1End + 120;
        const bPixels = 120;
        const x2End = x2Start + bPixels;
        const topWidth2 = 25;
        const x2TopLeft = x2End - topWidth2;

        const trapPoly = [{x:x2Start, y:yGround}, {x:x2End, y:yGround}, {x:x2End, y:yTop}, {x:x2TopLeft, y:yTop}];
        drawBrickPattern(trapPoly);
        const trapPath = new Path2D();
        trapPath.moveTo(x2Start, yGround); trapPath.lineTo(x2End, yGround); trapPath.lineTo(x2End, yTop); trapPath.lineTo(x2TopLeft, yTop); trapPath.closePath();
        ctx.stroke(trapPath);

        ctx.fillText('A', x2End + 20, yTop);
        ctx.fillText('B', x2Start, yGround + 25);
        
        drawDoubleArrow(x2Start, yGround + 50, x2End, yGround + 50, 'b');

        // Place centroid line for trapezoid
        const x2Centroid = x2Start + (bPixels**2 + bPixels*topWidth2 + topWidth2**2) / (3*(bPixels+topWidth2));
        ctx.save(); ctx.lineWidth = 1.5; ctx.setLineDash([6, 4]);
        ctx.beginPath(); ctx.moveTo(x2Centroid, yTop - 30); ctx.lineTo(x2Centroid, yGround); ctx.stroke();
        ctx.restore();
        ctx.fillText('y', x2Centroid, yTop - 45);

        // --- Common Elements ---
        const h_x_pos = (x1End + x2Start) / 2 - 5;
        drawDoubleArrow(h_x_pos, yGround, h_x_pos, yTop, 'h');

        drawWater(x1End, yTop, hPixels, 110);
        drawWater(x2End, yTop, hPixels, 110);
    </script>
</body>
</html>